import { DragOverlay, useDraggable } from '@dnd-kit/core';
import { Button } from 'antd';
import { ILCComponentConfig } from '../interface/ILCInterface';

interface IComponentWrapProps extends ILCComponentConfig<any> {

}

const ComponentWrap: React.FC<IComponentWrapProps> = (props) => {
    const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
        id: props.type,
    });
    const style: React.CSSProperties | undefined = transform ? {
        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
        zIndex: transform ? 1 : undefined,
        position: 'relative'
    } : undefined;
    return (
        <div>

            <div ref={setNodeRef}  {...listeners} {...attributes} >
                <Button type="dashed" style={{ width: "100%" }}  >
                    {props.name}
                </Button>
            </div>
            <DragOverlay>
                {isDragging ? (
                    <div>
                        <Button type="dashed" style={{ width: "100%" }}  >
                            {props.name}
                        </Button>
                    </div>
                ) : null}
            </DragOverlay>
        </div>

    )
}

export default ComponentWrap;